<template>
    <el-dialog title="数据导入" v-model="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" top="10vh"
        width="40%">
        <div class="template_content">
            <div class="template_content_bottom">
                <div>上传完善好的内容，支持格式为：xls、xlsx</div>
                <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
            </div>

        </div>
        <div class="main_content">
            <div class="main_content_bottom">
                <div>上传完善好的内容，支持格式为：xls、xlsx</div>
                <div class="main_content_bottom_main flex_center">
                    <el-upload ref="uploadRef" class="upload-demo" drag :auto-upload="false"
                        :before-upload="beforeUploadForm" :on-progress="progressUploadForm" :on-success="OnSuccess"
                        :action="uploadUrl" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button :loading="btnLoading" type="primary" @click="submit">确定</el-button>
        </span>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { downloadUserTemplate } from '@/api/sys/orgMemberApi';

const uploadUrl = "/proxy/sysUser/uploadUsers"
const dialogVisible = ref(false)
const btnLoading = ref(false)
const uploadRef = ref()
const openLoad = () => {
    dialogVisible.value = true
}
const emit = defineEmits(['callback'])

const beforeUploadForm = (file: any) => {
    var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
    const extension = testmsg === 'xls'
    const extension2 = testmsg === 'xlsx'
    if (!extension && !extension2) {
        ElMessage.error('上传文件只能是xls/xlsx格式！')
        return false
    }
}
const progressUploadForm = () => {
    ElMessage.success('正在上传，请稍后...')
}
const OnSuccess = (response: any) => {
    if (response.code === 200) {
        ElMessage.success("上传成功")
        emit('callback')
        handleClose()
    } else {
        ElMessage.warning(response.message)
    }
}

const close = () => {
    dialogVisible.value = false
}
const downloadTemplate = () => {
    downloadUserTemplate()

}
const submit = () => {
    uploadRef.value.submit()
}
const handleClose = () => {
    dialogVisible.value = false;
    btnLoading.value = false;
}
defineExpose({
    openLoad
})
</script>
<style lang="scss" scoped>
.template_content {

    margin-bottom: 20px;

    .template_content_bottom {
        padding: 20px;
        background: #f5f7fa;
        display: flex;
        justify-content: space-between;
    }
}

.main_content {
    .main_content_top {
        padding: 20px;
        background: #f5f7fa;
        margin-bottom: 20px;

        span {
            display: inline-block;
            margin-right: 20px;
        }
    }

    .main_content_bottom {
        padding: 20px;
        background: #f5f7fa;

        .main_content_bottom_main {
            // padding: 20px 0;
            background: #fff;
            margin-top: 16px;
            max-height: 200px;
            overflow: auto;

            .upload-demo {
                width: 100%;
                text-align: center;


            }

            // margin: 16px 0;
            ::v-deep {
                .el-upload {
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    outline: 0;
                    width: 100%;

                    .el-upload-dragger {
                        border: none;
                        height: 143px;
                        width: 100%
                    }
                }

            }
        }
    }
}
</style>